<!--
 * @Author: Bennty
 * @Date: 2024-12-16 14:36:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-19 15:31:01
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="成本分析" width="35%" destroy-on-close @close="handleClose">
        <el-table :data="props.costAnalysisDatile.costDataList" show-summary :summary-method="getSummary">
            <el-table-column label="品名" prop="productName" align="center"></el-table-column>
            <el-table-column label="成本单价" prop="costPrice" align="center"></el-table-column>
            <el-table-column label="数量" prop="number" align="center"></el-table-column>
            <el-table-column label="金额" prop="amount" align="center"></el-table-column>
        </el-table>
        <div class="order-info">
            <el-descriptions :column="2">
                <el-descriptions-item label="LOGO名称:"></el-descriptions-item>
                <el-descriptions-item label="产品名称:">{{props.customization_indent_tableware.filter((item)=>item.value == props.costAnalysisDatile.productStyle)[0].label}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="4">
                <el-descriptions-item label="销售总价:">{{ props.costAnalysisDatile.saleTotalPrice }}</el-descriptions-item>
                <el-descriptions-item label="订单数量:">{{props.costAnalysisDatile.orderNumber}}</el-descriptions-item>
                <el-descriptions-item label="成本总价:">{{props.costAnalysisDatile.costTotalPrice}}</el-descriptions-item>
                <el-descriptions-item label="利润:">{{props.costAnalysisDatile.profit}}</el-descriptions-item>
            </el-descriptions>
        </div>
        
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="handleClose" >关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { h } from 'vue';
import type { VNode } from 'vue'

const props = defineProps<{
    visible: boolean,
    costAnalysisDatile: any,
    customization_indent_tableware: any[]
}>();
const emits = defineEmits(['close', 'submit']);


const getSummary = () => {
    if(props.visible){
        const sums: (string | VNode)[] = [];
        sums[0] = h(
            'div',
            [
                h(
                    'div',
                    {},
                    `${props.costAnalysisDatile.createTime}`
                ),
                h(
                    'div',
                    {},
                    `${props.costAnalysisDatile.orderId}`
                )
            ]
        );
        sums[1] = '';
        sums[2] = '';
        sums[3] = props.costAnalysisDatile.costDataList.reduce((curr: any, prev: any)=>{
            return Number(curr) + Number(prev.amount);
        },0);
        return sums;
    }else{
        return [];
    }
    
};



const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>
.order-info{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 5%;
    .el-descriptions{
        width: 90%
    }

}
</style>